<script setup>
import gameData from '@/common/data.js';
import { capitalizeFirstLetter } from '@/common/utils.js';
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import FolatHome from './FloatHome.vue';
import GameItem from './GItem.vue';
import GameMenus from './GMenus.vue';

const route = useRoute();
const getNav = () => capitalizeFirstLetter(route.path?.split('/')[2]);
const category = ref(getNav());

watch(
  () => route.path,
  () => {
    category.value = getNav();
    window.scrollTo({
      top: 0,
      behavior: 'instant',
    });
  },
  { immediate: true },
);

const gameList = computed(() => {
  return gameData[category.value] || [];
});

const getLayoutSize = (index) => {
  const number = index + 1;
  return Math.ceil(number / 6) % 2 ? number % 6 === 1 : number % 6 === 2;
};
</script>

<template>
  <div class="category-page-wrap">
    <FolatHome />

    <div class="game-content">
      <div class="game-list">
        <div
          :class="['first-title', category]"
          :style="{ backgroundImage: `url(/nav_icon2/${category}.webp)` }"
        >
          <span>{{ category }}</span>
          <span>Games</span>
        </div>

        <GameItem
          v-for="(game, index) in gameList"
          :key="game.name"
          :game="game"
          :class="[
            'game-item',
            {
              hide: !game.name || game.hidden,
              large: getLayoutSize(index),
              gap: index === 5,
            },
          ]"
        />
      </div>
    </div>

    <GameMenus />
  </div>
</template>

<style lang="scss" scoped>
.category-page-wrap {
  position: relative;
  width: 100vw;
  overflow-x: hidden;
  color: #fff;

  .game-content {
    width: 100%;
    padding-bottom: 25px;
    overflow-x: hidden;

    .game-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 14px;

      .advertising {
        grid-column: 1 / -1;
        grid-row: 4 / 5;
        margin: 0 -14px;
      }

      .game-item {
        position: relative;
        display: flex;
        justify-content: center;
        min-height: 109px;

        &.large {
          grid-row: span 2;
          grid-column: span 2;
        }

        &.hide {
          z-index: -1;
          opacity: 0;
        }

        .game-img {
          width: 100%;
          height: 100%;
          border-radius: 12px;
          overflow: hidden;
        }

        .game-name {
          position: absolute;
          top: 0;
          font-size: 20px;
          color: red;
        }
      }

      .first-title {
        position: relative;
        overflow: hidden;
        grid-column: span 2;
        min-height: 110px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        text-align: center;
        background: url('/nav_icon2/Puzzle.webp') no-repeat center -30px/100%;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(to top, rgb(236, 39, 124), rgba(236, 39, 124, 0));
        }

        &.Recommend::after,
        &.Strategy::after,
        &.Adventure::after {
          background: linear-gradient(to top, rgb(152, 19, 160), rgba(152, 19, 160, 0));
        }

        &.Sports::after,
        &.Shooting::after {
          background: linear-gradient(to top, rgb(52, 114, 255), rgba(52, 114, 255, 0));
        }

        &.Puzzle::after,
        &.Kids::after {
          background: linear-gradient(to top, rgb(255, 213, 52), rgba(255, 213, 52, 0));
        }

        &.Classics::after,
        &.Action::after,
        &.Girls::after {
          background: linear-gradient(to top, rgb(236, 39, 124), rgba(236, 39, 124, 0));
        }

        &.Casual::after {
          background: linear-gradient(to top, rgb(108, 191, 42), rgba(108, 191, 42, 0));
        }

        span {
          position: relative;
          z-index: 2;
          font-size: 32px;
          color: #fff;

          &:nth-of-type(2) {
            font-size: 20px;
            opacity: 0.8;
          }
        }
      }
    }
  }
}
</style>
